import {
  selectCuesTopicManage,
  selectCuesTopicManageTimeline,
  selectTopicManageTreeAssignOrganization,
  selectTopicManageTreeLinkageOrganization,
  updateTopicManageRecordState,
} from '@/services/api/api-cues-topic';
import {
  CloseCircleOutlined,
  CloseCircleTwoTone,
  FileProtectOutlined,
  FileTextOutlined,
  LikeOutlined,
  StopOutlined,
  StopTwoTone,
  UserOutlined,
} from '@ant-design/icons';
import { ModalForm, ProCard, ProFormCascader, ProFormTextArea } from '@ant-design/pro-components';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import {
  Avatar,
  Button,
  Card,
  Cascader,
  Descriptions,
  message,
  Segmented,
  Tag,
  Typography,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import TableTopicManageEdit from './TableTopicManageEdit';

interface TableTopicMediaDetailsRecordProps {
  triggerMode: 'card' | 'label';
  item: CuesTopicData.TopicPage;
  onRefurbish: () => void;
  topicId: string;
}

const TableTopicMediaDetailsRecord: React.FC<TableTopicMediaDetailsRecordProps> = ({
  triggerMode,
  item,
  onRefurbish,
  topicId,
}) => {
  const access = useAccess();

  const formRef = useRef<ProFormInstance>();

  const [loading, setLoading] = useState(false);

  const [drawerFormVisible, setDrawerFormVisible] = useState(false);

  /**
   * 指派单位数据
   */
  const [treeAssignOrganizationData, setTreeAssignOrganizationDataState] = useState();

  /**
   * 联动单位数据
   */
  const [treeLinkageOrganizationData, setTreeLinkageOrganizationDataState] = useState();

  /**
   * 选题计划详情
   */
  const [dataTopicDetails, setDataTopicDetailsState] = useState<CuesTopicData.TopicSelectManage>();

  /**
   * 申请记录
   */
  const [dataTopicTimeline, setDataTopicTimelineState] = useState<any[]>();

  const [buttonRecordState, setButtonRecordStateState] = useState<number>(0);

  const [formGrade, setFormGradeState] = useState<string>();
  const [formRecordDescribes, setRecordDescribesState] = useState<string>();
  useEffect(() => {
    if (topicId === item.id) {
      if (topicId !== undefined) {
        setDrawerFormVisible(true);
      }
    }
  }, []);

  /**
   * 预备Tree结构数据
   * @param data
   */
  function readyTreeData(data: AdminOrganizationData.Organization[]): any {
    const treeData = new Array();
    if (data) {
      data.forEach((val) => {
        treeData.push({
          label: val.name,
          value: val.id,
          disabled: val.isFolder === 1 && val.isOrganization === 0 && val.children === undefined,
          children: readyTreeData(val.children as AdminOrganizationData.Organization[]),
        });
      });
    }
    return treeData;
  }
  /**
   * 加载 保存 推送 单位
   */
  const loadSelectTopicManageTreeAssignOrganization = async () => {
    try {
      const response = await selectTopicManageTreeAssignOrganization({ id: item.id });
      if (response.code === 0) {
        setTreeAssignOrganizationDataState(readyTreeData(response.data));
      }
    } catch (error) {}
  };

  /**
   * 加载 保存 联动 单位
   */
  const loadSelectTopicManageTreeLinkageOrganization = async () => {
    try {
      const response = await selectTopicManageTreeLinkageOrganization({
        id: item.id,
      });
      if (response.code === 0) {
        setTreeLinkageOrganizationDataState(readyTreeData(response.data));
      }
    } catch (error) {}
  };

  /**
   * 加载 选题计划详情
   * @param key
   */
  const loadCuesTopicDetails = async () => {
    setLoading(true);
    try {
      const response = await selectCuesTopicManage({ id: topicId ? topicId : item.id });
      const { code, data } = response;
      if (code === 0) {
        setDataTopicDetailsState(data);

        formRef.current?.setFieldsValue({
          deadlineTime: [data.createdTime, data.deadlineTime],
          assignOrganizationIds: data.cascaderAssignOrganizations,
          linkageOrganizationIds: data.cascaderLinkageOrganizations,
        });

        setLoading(false);
      }
    } catch (error) {}
  };

  /**
   * 加载 申请记录
   * @param key
   */
  const loadSelectCuesTopicManageTimelineData = async () => {
    try {
      const response = await selectCuesTopicManageTimeline({ id: topicId ? topicId : item.id });
      const { code, data } = response;
      if (code === 0) {
        const timeline = data.map((row: CuesTopicData.TopicRecord) => {
          let cover = '';

          let recordStateName = '';
          let recordStateColor = '';

          if (row.recordState === 1) {
            cover = 'https://wx4.sinaimg.cn/mw2000/0033ImPzly1hj076fx0z4j60p00p00w502.jpg';
            recordStateName = '申请';
            recordStateColor = '#108ee9';
          } else if (row.recordState === 2) {
            cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fx3ilj60p00p0wi502.jpg';
            recordStateName = '退回';
            recordStateColor = '#f50';
          } else if (row.recordState === 3) {
            cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fwx7zj60p00p0tc802.jpg';
            recordStateName = '通过';
            recordStateColor = '#87d068';
          } else if (row.recordState === 4) {
            cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fwzrfj60p00p0adi02.jpg';
            recordStateName = '废弃';
            recordStateColor = '#FF4D4F';
          } else {
            cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fx3ilj60p00p0wi502.jpg';
            recordStateName = '撤回';
            recordStateColor = '#FFA500';
          }

          return {
            color: recordStateColor,
            children: (
              <>
                <Tag color={recordStateColor}>{recordStateName}</Tag>
                {row?.createdTime}
                <a
                  onClick={async () => {
                    setLoading(true);
                    try {
                      const response = await selectCuesTopicManage({
                        id: row.topicId,
                        recordId: row.id,
                      });
                      const { code, data } = response;
                      if (code === 0) {
                        setDataTopicDetailsState(data);

                        formRef.current?.setFieldsValue({
                          deadlineTime: [data.createdTime, data.deadlineTime],
                          assignOrganizationIds: data.cascaderAssignOrganizations,
                          linkageOrganizationIds: data.cascaderLinkageOrganizations,
                        });

                        setLoading(false);
                      }
                    } catch (error) {}
                  }}
                >
                  详情
                </a>
                <div
                  style={{
                    marginTop: 8,
                  }}
                >
                  <Tag>{row.createdOrganizationName}</Tag>
                  {row.createdAccountName} {row.createdSource === 1 ? 'PC' : '小程序'}
                </div>
                {row?.describes !== null && row.describes !== '' && (
                  <Typography.Paragraph>
                    <pre>{row?.describes}</pre>
                  </Typography.Paragraph>
                )}
              </>
            ),
          };
        });

        setDataTopicTimelineState(timeline);
      }
    } catch (error) {}
  };

  /**
   * 级联组件 搜索筛选
   * @param inputValue
   * @param path
   * @returns
   */
  const filter = (inputValue: string, path) =>
    path.some(
      (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  const IconText = ({ icon, text }: { icon: any; text: string }) => (
    <span style={{ color: '#1677FF' }}>
      {React.createElement(icon, { style: { marginInlineEnd: 8 } })}
      {text}
    </span>
  );

  const TitleText = ({ title, text }: { title: string; text: any }) => (
    <span style={{ color: '#1677FF' }}>
      {title}：{text}
    </span>
  );

  const tagRecordStateView = () => {
    let recordStateName = '';
    let recordStateColor = '';

    if (dataTopicDetails?.recordState === 1) {
      recordStateName = '申请';
      recordStateColor = '#108ee9';
    } else if (dataTopicDetails?.recordState === 2) {
      recordStateName = '退回';
      recordStateColor = '#f50';
    } else if (dataTopicDetails?.recordState === 3) {
      recordStateName = '通过';
      recordStateColor = '#87d068';
    } else if (dataTopicDetails?.recordState === 4) {
      recordStateName = '废弃';
      recordStateColor = '#FF4D4F';
    } else if (dataTopicDetails?.recordState === 5) {
      recordStateName = '撤回';
      recordStateColor = '#FFA500';
    } else {
      recordStateName = '更新';
      recordStateColor = '#108ee9';
    }

    return <Tag color={recordStateColor}>{recordStateName}</Tag>;
  };

  const gradeSegmentedView = () => {
    const gradeSegmentedOptions =
      dataTopicDetails?.grade === 1
        ? [
            {
              label: (
                <div style={{ padding: 4 }}>
                  <Avatar style={{ backgroundColor: '#f50' }} icon={<UserOutlined />} />
                  <div>重大</div>
                </div>
              ),
              value: '1',
            },
          ]
        : dataTopicDetails?.grade === 2
        ? [
            {
              label: (
                <div style={{ padding: 4 }}>
                  <Avatar style={{ backgroundColor: '#ffd591' }} icon={<UserOutlined />} />
                  <div>重要</div>
                </div>
              ),
              value: '2',
            },
          ]
        : [
            {
              label: (
                <div style={{ padding: 4 }}>
                  <Avatar style={{ backgroundColor: '#2db7f5' }} icon={<UserOutlined />} />
                  <div>一般</div>
                </div>
              ),
              value: '3',
            },
          ];

    return (
      <Segmented
        defaultValue={dataTopicDetails?.grade + ''}
        value={dataTopicDetails?.grade + ''}
        options={gradeSegmentedOptions}
      />
    );
  };

  const drawerFormView = () => {
    let cover = '';

    let gradeName = '';
    let gradeColor = '';

    if (item.grade === 1) {
      cover = 'https://wx4.sinaimg.cn/mw2000/0033ImPzly1hj076fx0z4j60p00p00w502.jpg';
      gradeName = '重大';
      gradeColor = '#f50';
    } else if (item.grade === 2) {
      cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fx3ilj60p00p0wi502.jpg';
      gradeName = '重要';
      gradeColor = '#ffd591';
    } else if (item.grade === 3) {
      cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fwx7zj60p00p0tc802.jpg';
      gradeName = '一般';
      gradeColor = '#2db7f5';
    }

    let linkageTypeName = '';

    if (item.linkageType === 1) {
      linkageTypeName = '协助媒体';
    } else if (item.linkageType === 2) {
      linkageTypeName = '联动部门';
    } else if (item.linkageType === 3) {
      linkageTypeName = '协助媒体、单位';
    } else {
      linkageTypeName = '暂无';
    }

    let recordStateName = '';
    let recordStateColor = '';

    let recordActions: React.JSX.Element[] | React.ReactNode[] | undefined = [];

    if (item.recordState === 1) {
      cover = 'https://wx4.sinaimg.cn/mw2000/0033ImPzly1hj076fx0z4j60p00p00w502.jpg';
      recordStateName = '申请';
      recordStateColor = '#108ee9';
      recordActions = [
        <IconText icon={CloseCircleOutlined} text="废弃" key="list-vertical-star-o" />,
        <IconText icon={StopOutlined} text="撤回" key="list-vertical-star-o" />,
        // <IconText icon={LikeOutlined} text="发布" key="list-vertical-like-o" />,
        <IconText icon={LikeOutlined} text="详情" key="list-vertical-like-o" />,
      ];
    } else if (item.recordState === 2) {
      cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fx3ilj60p00p0wi502.jpg';
      recordStateName = '退回';
      recordStateColor = '#f50';
      recordActions = [
        <IconText icon={CloseCircleOutlined} text="废弃" key="list-vertical-star-o" />,
        <IconText icon={FileTextOutlined} text="详情" key="list-vertical-like-o" />,
      ];
    } else if (item.recordState === 3) {
      cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fwx7zj60p00p0tc802.jpg';
      recordStateName = '通过';
      recordStateColor = '#87d068';
      recordActions = [
        <TitleText
          title="报送单位"
          text={item.countSubmitOrganization}
          key="list-vertical-star-o"
        />,
        <TitleText title="报送线索" text={item.countSubmit} key="list-vertical-star-o" />,
      ];
    } else if (item.recordState === 4) {
      cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fwzrfj60p00p0adi02.jpg';
      recordStateName = '废弃';
      recordStateColor = '#FF4D4F';
      recordActions = [<IconText icon={LikeOutlined} text="详情" key="list-vertical-like-o" />];
    } else {
      cover = 'https://wx2.sinaimg.cn/mw2000/0033ImPzly1hj076fx3ilj60p00p0wi502.jpg';
      recordStateName = '撤回';
      recordStateColor = '#FFA500';
      recordActions = [
        <IconText icon={CloseCircleOutlined} text="废弃" key="list-vertical-star-o" />,
        <IconText icon={FileTextOutlined} text="详情" key="list-vertical-like-o" />,
      ];
    }

    // let industryNames = item?.industryNames;

    // if (industryNames.length > 4) {
    //   industryNames = industryNames.slice(0, 4);
    //   industryNames.push('...');
    // }

    // let labelNames = item?.labelNames;

    // if (labelNames.length > 4) {
    //   labelNames = labelNames.slice(0, 4);
    //   labelNames.push('...');
    // }

    const gradeSegmentedOptions =
      item.grade === 1
        ? [
            {
              label: (
                <div style={{ padding: 4 }}>
                  <Avatar style={{ backgroundColor: '#f50' }} icon={<UserOutlined />} />
                  <div>重大</div>
                </div>
              ),
              value: '1',
            },
          ]
        : item.grade === 2
        ? [
            {
              label: (
                <div style={{ padding: 4 }}>
                  <Avatar style={{ backgroundColor: '#ffd591' }} icon={<UserOutlined />} />
                  <div>重要</div>
                </div>
              ),
              value: '2',
            },
          ]
        : [
            {
              label: (
                <div style={{ padding: 4 }}>
                  <Avatar style={{ backgroundColor: '#2db7f5' }} icon={<UserOutlined />} />
                  <div>一般</div>
                </div>
              ),
              value: '3',
            },
          ];

    return (
      <DrawerForm
        key="add_topic_drawer_form"
        title={
          <>
            <Tag color={recordStateColor}>{recordStateName}</Tag>选题详情
          </>
        }
        drawerProps={{
          // maskClosable: false,
          destroyOnClose: true,
          width: '100%',
        }}
        visible={drawerFormVisible}
        loading={loading}
        formRef={formRef}
        trigger={
          triggerMode === 'card' ? (
            <div
              style={{
                paddingLeft: 10,
                paddingRight: 10,
                paddingBottom: 10,
              }}
            >
              <div
                style={{
                  borderRadius: 12,
                  background: '#FFF',
                  // backgroundImage: 'url(https://www.freeimg.cn/i/2023/10/24/6537c64da6294.png) no-repeat',
                }}
              >
                <Card
                  bordered={item.isRelease !== 1}
                  hoverable
                  style={{
                    // background:
                    //   item.run === 1
                    //     ? item.grade === 1
                    //       ? 'linear-gradient(#FDDCD8,#fff,#fff)'
                    //       : item.grade === 2
                    //         ? 'linear-gradient(#FFFBE6,#fff, #fff)'
                    //         : item.grade === 3
                    //           ? 'linear-gradient(#ECF7FF,#fff, #fff)'
                    //           : '#FFF'
                    //     : '#FFF',
                    background: 'linear-gradient(#F5FBFF,#fff, #fff)',
                  }}
                  actions={recordActions}
                >
                  <Card.Meta
                    avatar={
                      <Avatar
                        style={{
                          marginTop: '2px',
                        }}
                        size={'large'}
                        src={item.createdOrganizationAvatar}
                      />
                    }
                    title={
                      <div>
                        <span>{item.createdOrganizationName}</span>
                        <div
                          style={{
                            float: 'right',
                          }}
                        >
                          {item.isRelease === 1 ? (
                            <Tag
                              color={item.run === 1 ? 'green' : item.run === 2 ? 'red' : 'orange'}
                            >
                              {item.run === 1 ? '进行中' : item.run === 2 ? '已结束' : '已暂停'}
                            </Tag>
                          ) : (
                            <Tag color={recordStateColor}>{recordStateName}</Tag>
                          )}
                          {item.isRelease === 1 && <Tag color={gradeColor}>{gradeName}</Tag>}
                          {item.isLinkage === 1 && <Tag color="orange">{linkageTypeName}</Tag>}
                        </div>
                      </div>
                    }
                    description={
                      <>
                        <Typography.Paragraph ellipsis={true}>
                          {
                            <span
                              style={{
                                color: '#888A8C',
                                fontWeight: 'bold',
                              }}
                            >
                              {item.name}
                            </span>
                          }
                        </Typography.Paragraph>
                        {/* <div
                          style={{
                            marginTop: 8,
                          }}
                        >
                          行业：
                          <Space size={[0, 8]} wrap>
                            {industryNames?.map((item) => (
                              <Tag key={item}>{item}</Tag>
                            ))}
                          </Space>
                        </div>
                        <div
                          style={{
                            marginTop: 8,
                          }}
                        >
                          标签：
                          <Space size={[0, 8]} wrap>
                            {labelNames?.map((item) => (
                              <Tag key={item}>{item}</Tag>
                            ))}
                          </Space>
                        </div> */}
                        <div
                          style={{
                            marginTop: 16,
                            marginRight: 18,
                          }}
                        >
                          <span
                            style={{
                              color: item.run === 1 ? 'red' : '#888A8C',
                            }}
                          >
                            截止：
                            {item.deadlineTime.slice(0, 11)}
                          </span>
                          <span
                            style={{
                              float: 'right',
                            }}
                          >
                            提交：
                            {item.createdTime}
                          </span>
                        </div>
                      </>
                    }
                  />
                </Card>
              </div>
            </div>
          ) : (
            <Button size="small" type="primary" icon={<FileProtectOutlined />}>
              申请记录
            </Button>
          )
        }
        initialValues={{}}
        onVisibleChange={(visible: boolean) => {
          if (visible) {
            //加载权限树请求网络
            loadSelectTopicManageTreeAssignOrganization();
            loadSelectTopicManageTreeLinkageOrganization();
            loadSelectCuesTopicManageTimelineData();
            loadCuesTopicDetails();
          }
          setDrawerFormVisible(visible);
        }}
        onValuesChange={(values) => {
          if (values.assignOrganizationIds !== undefined) {
            formRef.current?.setFieldsValue({
              assignOrganizationIds: dataTopicDetails?.cascaderAssignOrganizations,
            });
          }
          if (values.linkageOrganizationIds !== undefined) {
            formRef.current?.setFieldsValue({
              linkageOrganizationIds: dataTopicDetails?.cascaderLinkageOrganizations,
            });
          }
          if (values.deadlineTime !== undefined) {
            formRef.current?.setFieldsValue({
              deadlineTime: [dataTopicDetails?.createdTime, dataTopicDetails?.deadlineTime],
            });
          }
        }}
        submitter={
          item.recordId === dataTopicDetails?.recordId &&
          dataTopicDetails?.recordState !== 4 && {
            render: (props, defaultDoms) => {
              return [
                item.isRelease !== 1 &&
                  (dataTopicDetails?.recordState === 1 ||
                    dataTopicDetails?.recordState === 2 ||
                    dataTopicDetails?.recordState === 3 ||
                    dataTopicDetails?.recordState === 5) && (
                    <ModalForm
                      key={'modal_form_release_state_discard'}
                      title={
                        <>
                          <CloseCircleTwoTone
                            style={{
                              marginRight: 8,
                            }}
                            twoToneColor="#FF4D4F"
                          />
                          废弃
                        </>
                      }
                      trigger={
                        <Button
                          key="button_release_state_discard"
                          icon={<CloseCircleOutlined />}
                          type="primary"
                          danger
                        >
                          废弃
                        </Button>
                      }
                      autoFocusFirstInput
                      modalProps={{
                        width: '100%',
                        // bodyStyle: { textAlign: 'center' },
                        destroyOnClose: true,
                        onCancel: () => console.log('run'),
                      }}
                      submitTimeout={2000}
                      submitter={{
                        submitButtonProps: {
                          type: 'primary',
                          style: { background: '#FF4D4F' },
                        },
                      }}
                      onFinish={async (values) => {
                        setButtonRecordStateState(4);
                        setRecordDescribesState(values.content);
                        props.submit();
                        return true;
                      }}
                    >
                      <Typography.Paragraph>
                        <blockquote>废弃，以下是意见</blockquote>
                      </Typography.Paragraph>
                      <ProFormTextArea
                        width="xl"
                        name="content"
                        fieldProps={{
                          rows: 6,
                          allowClear: true,
                          maxLength: 50000,
                          placeholder: '请输入废弃原因（支持换行输入）',
                          showCount: true,
                        }}
                        rules={[{ required: true, message: '请输入废弃原因' }]}
                      />
                    </ModalForm>
                  ),
                dataTopicDetails?.recordState !== 2 &&
                  dataTopicDetails?.recordState !== 3 &&
                  dataTopicDetails?.recordState !== 4 &&
                  dataTopicDetails?.recordState !== 5 && (
                    <ModalForm
                      key={'modal_form_release_state_returned'}
                      title={
                        <>
                          <StopTwoTone
                            style={{
                              marginRight: 8,
                            }}
                            twoToneColor="orange"
                          />
                          是否撤回
                        </>
                      }
                      trigger={
                        <Button
                          key="button_release_state_returned"
                          type="primary"
                          style={{
                            background: 'orange',
                          }}
                          icon={<StopOutlined />}
                        >
                          撤回
                        </Button>
                      }
                      autoFocusFirstInput
                      modalProps={{
                        width: '100%',
                        // bodyStyle: { textAlign: 'center' },
                        destroyOnClose: true,
                        onCancel: () => console.log('run'),
                      }}
                      rules={[{ required: true, message: '请输入撤回原因' }]}
                    >
                  </ModalForm>
                ),
                dataTopicDetails?.recordState !== 1 && dataTopicDetails?.recordState !== 3 && (
                  <TableTopicManageEdit
                    key={'table_topic_manage_edit'}
                    item={item}
                    onRefurbish={() => {
                      onRefurbish();
                      loadSelectCuesTopicManageTimelineData();
                      loadCuesTopicDetails();
                    }}
                    mode="apply"
                  />
                ),
              ];
            },
          }
        }
        onFinish={async (values) => {
          if (buttonRecordState === 0) {
            return;
          }

          const response = await updateTopicManageRecordState({
            id: item.id,
            recordState: buttonRecordState,
            updateSource: 1,
            grade: formGrade,
            recordDescribes: formRecordDescribes,
          });

          if (response.code === 0) {
            message.success('提交成功');
            onRefurbish();
            return true;
          } else {
            return false;
          }
        }}
      >
        <ProCard split="vertical" ghost>
          {/* <ProCard
            title="申请记录"
            colSpan="32%"
            bodyStyle={{
              paddingTop: 10,
              paddingLeft: 5,
            }}
          >
            <Timeline items={dataTopicTimeline} />
          </ProCard> */}
          <ProCard
            title={
              <>
                {tagRecordStateView()}
                <Typography.Title level={3}>{dataTopicDetails?.name}</Typography.Title>
              </>
            }
            headerBordered
          >
            <Descriptions size="small">
              <Descriptions.Item label="分类">{gradeSegmentedView()}</Descriptions.Item>
            </Descriptions>
            {/* <Descriptions
              size="small"
              style={{
                marginTop: 24,
              }}
            >
              <Descriptions.Item label="行业">
                <Space size={[0, 8]} wrap>
                  {dataTopicDetails?.industryNames.map((industry) => (
                    <Tag key={item.id + industry}>{industry}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
            </Descriptions>
            <Descriptions
              size="small"
              style={{
                marginTop: 24,
              }}
            >
              <Descriptions.Item label="标签">
                <Space size={[0, 8]} wrap>
                  {item.labelNames.map((label) => (
                    <Tag key={item.id + label}>{label}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
            </Descriptions> */}
            <Descriptions size="small">
              <Descriptions.Item label="创建日期">
                <Typography.Text type="success">{dataTopicDetails?.createdTime}</Typography.Text>
              </Descriptions.Item>
              <Descriptions.Item label="截止日期">
                <Typography.Text type="danger">{dataTopicDetails?.deadlineTime}</Typography.Text>
              </Descriptions.Item>
            </Descriptions>
            <div
              style={{
                marginTop: 24,
              }}
            >
              <ProFormCascader
                width="xl"
                label={
                  <span
                    style={{
                      color: 'rgba(0, 0, 0, 0.45)',
                    }}
                  >
                    指派征集单位：
                  </span>
                }
                name="assignOrganizationIds"
                placeholder="选择单位"
                fieldProps={{
                  options: treeAssignOrganizationData,
                  // showSearch: { filter },
                  multiple: true,
                  removeIcon: false,
                  allowClear: false,
                  maxTagCount: 'responsive',
                  showCheckedStrategy: Cascader.SHOW_CHILD,
                }}
              />
            </div>
            <div
              style={{
                marginTop: 24,
              }}
            >
              <span
                style={{
                  color: 'rgba(0, 0, 0, 0.45)',
                }}
              >
                选题内容：
              </span>
              <Typography.Paragraph>
                <blockquote>{dataTopicDetails?.content}</blockquote>
              </Typography.Paragraph>
            </div>
            {dataTopicDetails?.isLinkage === 1 && dataTopicDetails?.cascaderLinkageOrganizations && (
              <ProFormCascader
                width="xl"
                label={
                  <span
                    style={{
                      color: 'rgba(0, 0, 0, 0.45)',
                    }}
                  >
                    {dataTopicDetails?.linkageType === 1
                      ? '协助媒体：'
                      : dataTopicDetails?.linkageType === 2
                      ? '联动部门：'
                      : dataTopicDetails?.linkageType === 3
                      ? '协助媒体、单位：'
                      : '协助媒体、单位：'}
                  </span>
                }
                name="linkageOrganizationIds"
                placeholder="选择单位"
                fieldProps={{
                  options: treeLinkageOrganizationData,
                  // showSearch: { filter },
                  multiple: true,
                  removeIcon: false,
                  allowClear: false,
                  maxTagCount: 'responsive',
                  showCheckedStrategy: Cascader.SHOW_CHILD,
                }}
              />
            )}
            {dataTopicDetails?.linkageDescribes && (
              <div
                style={{
                  marginTop: 8,
                }}
              >
                <span
                  style={{
                    color: 'rgba(0, 0, 0, 0.45)',
                  }}
                >
                  {dataTopicDetails?.linkageType === 1
                    ? '协助媒体描述：'
                    : dataTopicDetails?.linkageType === 2
                    ? '联动部门描述：'
                    : dataTopicDetails?.linkageType === 3
                    ? '协助媒体、单位描述：'
                    : '协助媒体、单位描述：'}
                </span>
                <Typography.Paragraph>
                  <blockquote>{dataTopicDetails?.linkageDescribes}</blockquote>
                </Typography.Paragraph>
              </div>
            )}
          </ProCard>
        </ProCard>
      </DrawerForm>
    );
  };

  return drawerFormView();
};
export default TableTopicMediaDetailsRecord;
